<template>
  <div id="chartBarFlow" ref="chartBarFlow" style="width:100%; height:500px;margin-top:20px;"></div>
</template>

<script>
import { getTime } from '@/api/home'
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  props: {
    barList: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    barList: {
      handler (newValue, oldValue) {
        this.$nextTick(() => {
          this.chart.dispose()
          this.initChart(newValue)
        })
      },
      deep: true // 深度监听
    }

  },
  data () {
    return {
      chart: null,
      alarmList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart(this.barList)
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    listData (val) {
      this.chart.setOption(this.option({ value: val }))
    },
    option (val) {
      var _that = this
      var data = {
        title: {
          // text: val.xData,
          left: '50%',
          textAlign: 'center'
          // textAlign: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter (params) {
            let text = ''
            for (let item of params) {
              // console.log(item)
              if (item.componentIndex === 0) {
                text += `${item.name}</br>`
              };
              if (item.value > 0) {
                var name = _that.valueFormation(item.value)
                text += `<span style="color:${item.color};font-size:14px">●&nbsp;</span><span style="display:inline-block;">${item.seriesName}&nbsp:&nbsp${name}</span></br>`
              }
            }
            return text
          },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: val.time_list,
          name: this.$t('时间'),
          width: 1
        },
        yAxis: {
          type: 'value',
          name: 'B'
        },
        series: []
      }
      for (let item in val.flow_data) {
        data.series.push({
          name: item,
          type: 'bar',
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: val.flow_data[item]
        })
      }
      // val.flow_data.forEach((item, index) => {
      //   data.series.push({
      //     name: index,
      //     type: 'bar',
      //     barGap: 0,
      //     emphasis: {
      //       focus: 'series'
      //     },
      //     data: item
      //   })
      // })
      return data
    },
    initChart (data) {
      getTime()
      this.chart = this.$echarts.init(document.getElementById('chartBarFlow'))
      this.chart.setOption(this.option(data), true)
    },
    valueFormation (val) {
      if (val > (1024 * 1024 * 1024)) {
        return (val / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      } else if (val > (1024 * 1024)) {
        return (val / (1024 * 1024)).toFixed(2) + 'MB'
      } else if (val > 1024) {
        return (val / 1024).toFixed(2) + 'KB'
      }
      return val + 'B'
    }
  }
}
</script>
